<script setup lang="ts">

</script>

<template>
<div class="card">
  <div v-if="$slots.header" class="card-header">
    <slot name="header"></slot>
  </div>
  <div v-if="$slots.default" :class="($slots.header && $slots.footer)?'card-content':'card-height-change'">
    <slot name="default"></slot>
  </div>
  <div v-if="$slots.footer" class="card-footer">
    <slot name="footer"></slot>
  </div>
</div>
</template>

<style scoped>
.card{
  width: 500px;
  height: 500px;
  border: 5px solid #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-header{
  background: #ffffff;
  width: 100%;
  height: 10%;
}
.card-height-change{
  height: 90%;
}


.card-content{
  background-color: aliceblue;
  width: 100%;
  height: 80%;
}
.card-footer{
  background:  #67d5c5;
  width: 100%;
  height: 10%;
}
</style>